<template>
  <div id="preferences">
    <!-- 1 -->
    <div class="box1">
      <div class="box1Item">
        <div class="titleBoxWhat">
          <img src="@/assets/meng/shop_details01.png" alt="" />
          <span>观众来源</span>
        </div>
        <div class="chartBox">
          <BigPie :valueData="sourceData" v-if="finishSource" :iswrap="true" />
          <!-- <div
              v-loading="!finishFlag"
              v-if="!finishFlag"
              class="loading"
              element-loading-text="拼命加载中..."
              element-loading-spinner="el-icon-loading"
            ></div>
            <div v-if="finishFlag && genderData == null" class="noDataNoticewl">
              目前没有可以查看的数据哟~
            </div> -->
        </div>
      </div>
      <div class="box1Item">
        <div class="titleBoxWhat">
          <img src="@/assets/wang/tdetails/Gender.png" alt="" />
          <span>达人性别分布</span>
        </div>
        <div class="chartBox">
          <BigPie :valueData="ageData" v-if="finishAge" :iswrap="true" />
          <!-- <div
              v-loading="!finishFlag"
              v-if="!finishFlag"
              class="loading"
              element-loading-text="拼命加载中..."
              element-loading-spinner="el-icon-loading"
            ></div>
            <div v-if="finishFlag && genderData == null" class="noDataNoticewl">
              目前没有可以查看的数据哟~
            </div> -->
        </div>
      </div>
      <div class="box1Item">
        <div class="titleBoxWhat">
          <img src="@/assets/wang/tdetails/age.png" alt="" />
          <span>达人年龄分布</span>
        </div>
        <div class="chartBox">
          <DetailsBar
            :starXData="ageXData"
            :starYData="ageYData"
            v-if="finishAge"
          />
          <!-- <div
                v-loading="!finishFlag"
                v-if="!finishFlag"
                class="loading"
                element-loading-text="拼命加载中..."
                element-loading-spinner="el-icon-loading"
              ></div>
              <div v-if="finishFlag && starRate == null" class="noDataNoticewl">
                目前没有可以查看的数据哟~
              </div> -->
        </div>
      </div>
      <div class="box1Item">
        <div class="titleBoxWhat">
          <img src="@/assets/wang/tdetails/map.png" alt="" />
          <span>达人地域分布图</span>
        </div>
        <div class="chartBox">
          <ChinaMap
            :mapData="provinceRate"
            v-if="finishFlag"
            :showVisualMap="false"
          />
          <!-- <div
            v-loading="!finishFlag"
            v-if="!finishFlag"
            class="loading"
            element-loading-text="拼命加载中..."
            element-loading-spinner="el-icon-loading"
          ></div>
          <div
            v-if="finishFlag && provinceRate == null"
            class="noDataNoticewl"
          >
            目前没有可以查看的数据哟~
          </div> -->
        </div>
      </div>
    </div>
    <!-- 2 -->
    <div class="box2">
      <div class="box2Item">
        <div class="titleBoxWhat">
          <img src="@/assets/meng/hot_video15.png" alt="" />
          <span>观众弹幕热词风云榜</span>
        </div>
        <table class="mytable mytable01">
          <thead>
            <tr>
              <th>排名</th>
              <th>带货直播</th>
              <th>未带货直播</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="item in 10" :key="item">
              <td>10</td>
              <td>
                <div class="info01">
                  <p>冬天冬天冬天冬天冬天冬天冬天</p>
                  <p>提及次数 400.7亿</p>
                </div>
              </td>
              <td>
                <div class="info01">
                  <p>冬天</p>
                  <p>提及次数 40.7w</p>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="box2Item">
        <div class="titleBoxWhat">
          <img src="@/assets/wang/live/gift.png" alt="" />
          <span>土豪送礼Top10</span>
        </div>
        <table class="mytable mytable02">
          <thead>
            <tr>
              <th>排名</th>
              <th>达人</th>
              <th>销售额</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="item in 10" :key="item">
              <td>10</td>
              <td>
                <div class="info02">
                  <img src="@/assets/wang/talentCompare/avator.png" />
                  <span>四川观察四川观察四川观察四川观察</span>
                </div>
              </td>
              <td>148.3w</td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="box2Item">
        <div class="titleBoxWhat">
          <img src="@/assets/wang/video/useJob.png" alt="" />
          <span>最受欢迎达人画像</span>
        </div>
        <div class="portraitBox">
          <section>
            <div class="infoBox">
              <img src="@/assets/wang/live/male.png" />
              <div class="infoRight">
                <p>达人性别 男</p>
                <p>受欢迎度 59.0%</p>
              </div>
            </div>
            <div class="labelBox">
              <div class="labelItem">
                <p>北京</p>
                <p>最受欢迎的地域</p>
              </div>
              <div class="labelItem">
                <p>知识资讯</p>
                <p>最受欢迎的行业</p>
              </div>
              <div class="labelItem">
                <p>25-30</p>
                <p>最受欢迎的年龄</p>
              </div>
              <div class="labelItem">
                <p>63%</p>
                <p>男性观众欢迎度</p>
              </div>
              <div class="labelItem">
                <p>37%</p>
                <p>女性观众欢迎度</p>
              </div>
            </div>
          </section>
          <section>
            <div class="infoBox">
              <img src="@/assets/wang/live/female.png" />
              <div class="infoRight">
                <p>达人性别 女</p>
                <p>受欢迎度 59.0%</p>
              </div>
            </div>
            <div class="labelBox">
              <div class="labelItem">
                <p>北京</p>
                <p>最受欢迎的地域</p>
              </div>
              <div class="labelItem">
                <p>知识资讯</p>
                <p>最受欢迎的行业</p>
              </div>
              <div class="labelItem">
                <p>25-30</p>
                <p>最受欢迎的年龄</p>
              </div>
              <div class="labelItem">
                <p>63%</p>
                <p>男性观众欢迎度</p>
              </div>
              <div class="labelItem">
                <p>37%</p>
                <p>女性观众欢迎度</p>
              </div>
            </div>
          </section>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import DetailsBar from "@/pages/wang/talent/tdetails/component/DetailsBar";
import BigPie from "@/pages/wang/talent/tdetails/component/BigPie";
import ChinaMap from "@/pages/wang/talent/tdetails/component/ChinaMap";
export default {
  name: "preferences",
  components: { ChinaMap, BigPie, DetailsBar },
  data() {
    return {
      // 观众来源
      sourceData: [
        { value: 335, name: "直接访问" },
        { value: 310, name: "邮件营销" },
        { value: 234, name: "联盟广告" },
        { value: 135, name: "视频广告" },
        { value: 1548, name: "搜索引擎" },
      ],
      finishSource: true,
      //   性别
      ageData: [
        { value: 335, name: "男" },
        { value: 310, name: "女" },
      ],
      finishAge: true,
      //   达人年龄分布
      ageXData: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
      ageYData: [10, 52, 200, 334, 390, 330, 220],
      finishAge: true,
      //   达人地域
      provinceRate: [],
      finishFlag: true,
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},

  methods: {},
};
</script>
<style lang='less' scoped>
#preferences {
  box-sizing: border-box;
  width: 100%;
  //   overflow: auto;
  .box1 {
    box-sizing: border-box;
    padding: 26px 0 0 20px;
    width: 100%;
    display: flex;
    justify-content: center;
    background-color: #fff;
    margin-top: 20px;
    border-radius: 4px;

    .box1Item {
      width: 25%;
      .chartBox {
        width: 100%;
        height: 238px;
      }
    }
  }
  .box2 {
    width: 100%;
    margin-top: 20px;
    display: flex;
    justify-content: center;
    .box2Item {
      flex: 1;
      margin-right: 20px;
      background-color: #fff;
      border-radius: 4px;
      padding: 26px 20px 0 20px;
    }
    .box2Item:last-child {
      margin-right: 0 !important;
    }
    .mytable {
      width: 100%;
      margin-top: 30px;
      thead {
        tr {
          th {
            font-size: 14px;
            color: #888888;
            text-align: left;
          }
        }
      }
      tbody {
        tr {
          height: 72px;
          border-bottom: 1px solid #e5e5e5;
        }
        tr:last-child {
          border: none;
        }
      }
      td {
        text-align: left;
      }
    }
    .info01 {
      p:nth-of-type(1) {
        font-size: 14px;
        color: #222222;
        font-weight: 600;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
      }
      p:nth-of-type(2) {
        font-size: 14px;
        color: #1779ff;
        padding-top: 5px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
      }
    }
    .info02 {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      img {
        width: 40px;
        height: 40px;
      }
      span {
        padding-left: 8px;
        font-size: 14px;
        color: #222222;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
      }
    }
    .mytable01 {
      thead {
        tr {
          th:nth-of-type(2),
          th:nth-of-type(3) {
            width: 45%;
            padding-left: 39px;
          }
          th:nth-of-type(1) {
            text-align: center;
          }
        }
      }
      tbody {
        tr {
          td:nth-of-type(1) {
            font-size: 16px;
            text-align: center;
            font-family: DINAlternate-Bold;
          }
          td:nth-of-type(2) {
            padding-left: 39px;
          }
          td:nth-of-type(3) {
            padding-left: 39px;
          }
        }
      }
    }
    .mytable02 {
      thead {
        tr {
          th:nth-of-type(2) {
            width: 65%;
            padding-left: 40px;
          }
          th:nth-of-type(3) {
            width: 25%;
            padding-left: 20px;
          }
          th:nth-of-type(1) {
            text-align: center;
          }
        }
      }
      tbody {
        tr {
          td:nth-of-type(1) {
            text-align: center;
            font-size: 16px;
            color: #222222;
            font-family: DINAlternate-Bold;
          }
          td:nth-of-type(2) {
            padding-left: 40px;
          }
          td:nth-of-type(3) {
            font-size: 16px;
            color: #1779ff;
            font-family: DINAlternate-Bold;
            padding-left: 20px;
          }
        }
      }
    }
    // 画像
    .portraitBox {
      .infoBox {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding-top: 40px;
        img {
          width: 60px;
          height: 60px;
          border-radius: 50%;
        }
        .infoRight {
          padding-left: 13px;
          p:nth-of-type(1) {
            font-weight: 600;
            font-size: 14px;
            color: #222222;
          }
          p:nth-of-type(2) {
            font-size: 14px;
            color: #1779ff;
            padding-top: 3px;
          }
        }
      }
      .labelBox {
        width: 100%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-wrap: wrap;
        padding-top: 30px;
        border-bottom: 1px solid #e5e5e5;
        .labelItem {
          width: 33.3%;
          padding-bottom: 20px;
          p:nth-of-type(1) {
            font-size: 16px;
            color: #1779ff;
          }
          p:nth-of-type(2) {
            font-size: 14px;
            color: #888888;
          }
        }
      }
    }
  }
}
</style>